<template>
  <view class="page custom-page">
    <custom-head gradient back title="创建班级">
      <view class="my_school" slot="right" @click="toPage('/pages/school/addition')"> 我的学校 </view>
    </custom-head>

    <view class="addition">
      <view class="touxiang-box flex col a-center j-c-c">
        <u-upload 
          max-count="1" 
          action="/file/upload"
          :file-list="fileList"
          :form-data="{ type: 'avatar' }"
          :header="{ Authorization: token }"
          :action="BASE_URL + '/file/upload'"
          @on-change="onSuccess"
          @on-remove="omRemove"
        >
          <view class="touxiang" slot="addBtn">
            <image src="../../static/img/avatar.png" mode="widthFix"></image>
          </view>
        </u-upload>
        <text>学校LOGO</text>
      </view>
    </view>

    <view class="create" v-if="isSuccess">
      <u-form :model="form" ref="createForm" label-width="180">
        <u-form-item label="班级名称"><u-input v-model="form.name" placeholder="最多16个字符" /></u-form-item>
        <u-form-item label="所属学校">
          <u-input v-model="sname" placeholder="请选择学校" @click="showSchool = true" />
          <u-icon name="arrow-down" color="#91959B" size="26"></u-icon>
        </u-form-item>
        <u-form-item label="老师 (1)">
          <u-input v-model="teacher_1_name" placeholder="请选择老师"  @click="handleTeaherClick(1)" />
          <u-icon name="arrow-down" color="#91959B" size="26"></u-icon>
        </u-form-item>
        <u-form-item label="老师 (2)">
          <u-input v-model="teacher_2_name" placeholder="请选择老师"  @click="handleTeaherClick(2)" />
          <u-icon name="arrow-down" color="#91959B" size="26"></u-icon>
        </u-form-item>
        <u-form-item label="老师 (3)">
          <u-input v-model="teacher_3_name" placeholder="请选择老师"  @click="handleTeaherClick(3)" />
          <u-icon name="arrow-down" color="#91959B" size="26"></u-icon>
        </u-form-item>
      </u-form>
    </view>

    <view class="bottom_btn_box">
      <u-button type="primary" shape="circle" @click="submit">{{showUrlId? '修改班级' : '创建班级'}}</u-button>
    </view>

    <u-action-sheet class="bao_max_height" cancelText="取消" :list="schoolList" v-model="showSchool" @click="enterSchool"></u-action-sheet>
    <u-action-sheet class="bao_max_height" cancelText="取消" :list="teacherList" v-model="showTeacher" @click="enterTeacher"></u-action-sheet>
  </view>
</template>

<script>
import { addClass, getClassDetail, updateClass } from '../../api/modules/class'
import { toPage } from '../../utils/index.js'
import {  init } from '../../utils/getData';
import { BASE_URL } from '../../api/config'

export default {
  data() {
    return {
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
      BASE_URL,
      token: uni.getStorageSync('token'),
      fileList: [], // img
      form: {
        teacher_1: null,
        teacher_2: null,
        teacher_3: null,
        sid: null,
        name: '',
        avatar: '', // 头像
      },
      teacher_1_name: '',
      teacher_2_name: '',
      teacher_3_name: '',
      sname: '',
      isSuccess: true,
      schoolList: [],
      teacherList: [],
      showTeacher: false,
      showSchool: false,
      activeTeacher: 1,
      showUrlId: false , // 是否是修改
    }
  },
  mounted() {
    this._getSchool(getApp().globalData.schools)
    this._getTeacher(getApp().globalData.glb_list.teachers)
    console.log('id---', getApp().globalData)
    let id = this.$route.query.id
    if (id) {
      this.showUrlId = true;
      this._getClassDetail(id);
    }
  },

  methods: {
    omRemove(index) { // 移除照片
			if (index === 0) {
				this.fileList = []
				this.form.avatar = ''
			}
		},
    onSuccess(data) {
      const res = JSON.parse(data.data)
      if (res.code == 201) {
        this.form.avatar = res.data.path
      } else {
        this.$refs.uUpload.clear()
        this.$u.toast('上传失败')
      }
    },
    toPage,

    handleTeaherClick(index) {
      this.activeTeacher = index
      this.showTeacher = true
    },

    submit() {
      if (this.showUrlId) {
        this._updateClass(this.$route.query.id, this.form);
      } else {
        this._addClass(this.form)
      }
    },

    enterSchool(e) {
      console.log('e', e, this.schoolList[e].id)
      this.form.sid = this.schoolList[e].id
      this.sname = this.schoolList[e].name
    },

    enterTeacher(e) {
      console.log(this.form['teacher_' + this.activeTeacher])
      this.form['teacher_' + this.activeTeacher] = this.teacherList[e].id
      this['teacher_' + this.activeTeacher + '_name'] = this.teacherList[e].name
    },

    _getSchool(param) {
        this.schoolList = param.map((item) => ({ ...item, text: item.name }))
    },

    _getTeacher(list) {
        this.teacherList = list.map((item) => ({ ...item, text: item.name }))
    },
    _updateClass(id, data) { // 修改班级
      updateClass(id, data).then(res => {
        const { code } = res || {}
        if (code === 201) {
          this.$u.toast('添加成功')
          init(); // 更新数据 
          this.form = {
            teacher_1: null,
            teacher_2: null,
            teacher_3: null,
            sid: null,
            name: ''
          }
          uni.navigateBack({
              delta: 1
          })
          this.teacher_1_name = ''
          this.teacher_2_name = ''
          this.teacher_3_name = ''
          this.sname = ''
        }
      })
    },

    _addClass(data) {
      addClass(data).then((res) => {
        if (res.code == 201) {
          this.$u.toast('添加成功')
          init(); // 更新数据 
          this.form = {
            teacher_1: null,
            teacher_2: null,
            teacher_3: null,
            sid: null,
            name: ''
          }
          uni.navigateBack({
              delta: 1
          })
          this.teacher_1_name = ''
          this.teacher_2_name = ''
          this.teacher_3_name = ''
          this.sname = ''
        } else {
          this.$u.toast(res.message)
        }
      })
    },
    _getClassDetail(id) {
      getClassDetail(id).then(res => {
        const { code, data } = res || {}
        const { teacher_1, teacher_2, teacher_3, sid } = data || {}
        if (code === 200) {
          this.form = {
            ...data
          }
          this.teacher_1_name = this.teacherList.filter(i => i.id === teacher_1)[0]?.text;
          this.teacher_2_name = this.teacherList.filter(i => i.id === teacher_2)[0]?.text;
          this.teacher_3_name = this.teacherList.filter(i => i.id === teacher_3)[0]?.text;
          this.sname = this.schoolList.filter(i => i.id === sid)[0]?.text
          this.fileList = [{url: `${this.static_uri}${data.avatar}`}]
          console.log('res', res)
          console.log('schoolList', this.schoolList)
          console.log('teacherList', this.teacherList)
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">

.touxiang-box {
  padding: 40rpx 0;
  font-size: 30rpx;
}

.touxiang {
  width: 150rpx !important;
  height: 150rpx !important;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 25rpx;
}

.touxiang image {
  width: 100%;
  height: 100%;
}

.addition {
    height: 100%;
}
.my_school {
  color: #fff;
  padding-right: 20rpx;
  padding-top: 10rpx;
}

.bao_max_height {
  /deep/.uni-scroll-view-content {
    overflow: auto;
    max-height: 800rpx;
  }
}

.create {
  background-color: #fff;
  padding: 44rpx;
  height: calc(100vh - 552rpx);
}
.bottom_btn_box {
  /* height: 100%; */
  background-color: #fff;
}
</style>
